<template>
  <div class="userPages">
    <div v-if="showFather">
      <serch :formInline="formInline" :options='options' v-on:serchFormInline="serchFormInline" :name='name' :title='title'></serch>
      <div class="checkTable">
        <div class="ct_title">
          用户列表
        </div>
        <div class="ct_button">
          <el-button @click="GoUseradd" class="newAdd"  icon="el-icon-plus">新建用户</el-button>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            prop="username"
            label="用户名"
            min-width='100'>
          </el-table-column>
          <el-table-column
            prop="rids"
            label="角色"
            min-width='80'>
            <template slot-scope="scope">
                <div v-if="scope.row.rids[0] == 1">
                    管理员
                </div>
                <div v-if="scope.row.rids[0] == 2">
                    普通用户
                </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            min-width='150'>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            show-overflow-tooltip
            min-width='100'>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            min-width="100">
            <template slot-scope="scope">
                <el-button 
                    type="text"
                    @click="handleSee(scope.$index, scope.row)">编辑</el-button>
                <el-button 
                    type="text"
                    @click="handleEdit(scope.$index, scope.row)">修改密码</el-button>
                <el-button
                    type="text"
                    @click="delateUser(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </div>
    

    <router-view></router-view>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisibleUser" class="dialogUser" :before-close="dialogClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="ruleForm.newPassword" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="ruleForm.confirmPassword" autocomplete="off"  type="password"></el-input>
          <span class="span_tip">8~16位,数字、大/小写字母、特殊字符` - = [ ] \ ; ' , . / ~ ! @ # $ % ^ & * ( ) _ + { } | : " < > ? ·</span>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')" class="delate">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" class="newAdd">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import serch from '../../components/serch.vue'
import { getUserList , getRolelist , deleteUserByIds , modifyUserPassword} from '../../api/index'
export default {
  components:{
    serch
  },
  data(){
    var validatePass = (rule, value, callback) => {
      var passRule = /^[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,16}$/ 
      if (value === '') {
        callback(new Error('请输入密码'));
      }else if(!passRule.test(value)){
        callback(new Error('密码格式不正确'));
      } else {
        if (this.ruleForm.confirmPassword !== '') {
          this.$refs.ruleForm.validateField('confirmPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      var passRule = /^[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,16}$/ 
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      }else if(!passRule.test(value)){
        callback(new Error('密码格式不正确'));
      } else {
        callback();
      }
    };
    return{
      name:'用户名',
      title:'角色',
      token:'',
      //
      id:'',
      pageNum:1,
      pageSize:10,
      total:0,
      showFather:true,
      formInline: {
        fileName: '',
        mediaType: ''
      },
      tableData: [],
      options: [],
      currentPage:1,
      multipleSelection:[],
      dialogFormVisibleUser: false,
      ruleForm: {
        newPassword:'',
        confirmPassword:'',
      },
      rules: {
        newPassword: [
          {required: true, validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          {required: true, validator: validatePass2, trigger: 'blur' }
        ],
        
      }
    }
  },
  watch:{
    $route(){
      if(this.$route.path == '/home/user'){
        this.showFather = true
        this.init()
      }else if(this.$route.path == '/home/user/useradd'|| this.$route.path == '/home/user/useredit'){
        this.showFather = false
      }
    }
  },
  created(){
    if(this.$route.path == '/home/user'){
      this.showFather = true
    }else if(this.$route.path == '/home/user/useradd' || this.$route.path == '/home/user/useredit'){
      this.showFather = false
    }
    this.token = sessionStorage.getItem('token')
  },
  mounted(){
    this.init()
    this.initOption()
  },
  methods:{
    init(){
      console.log(window.location.origin)
      let pageNum = this.pageNum
      let pageSize = this.pageSize
      let username = this.formInline.fileName
      let rids = []
      if(this.formInline.mediaType){
        rids.push(this.formInline.mediaType)
      }
      let params = { pageNum, pageSize, username, rids}
      getUserList(params).then(res=>{
        let re = res.data.data
        this.tableData = re.object
        this.total = re.count
      })
    },
    initOption(){
      
      let params = { }
      getRolelist(params).then(res=>{
        let re = res.data.data
        this.total = re.count
        re.object.forEach((el,index)=>{
          this.options.push({
            value: el.id,
            label: el.roleName
          })
        })
      })
    },
    serchFormInline(e){
      this.pageNum = 1
      this.pageSize = 10
      this.formInline.fileName = e.fileName
      this.formInline.mediaType = e.mediaType
      this.init()
    },
    onSubmit() {
      this.$emit('childByValue', this.childValue)
    },
    reset(){
      this.formInline.user= ''
      this.formInline.region= ''
    },
    handleSelectionChange(e){
      this.multipleSelection = e
    },
    GoUseradd(){
      this.$router.push('/home/user/useradd')
    },
    handleSee(index,item){
      this.$router.push({
        path: '/home/user/useredit',
        query:{
          id: item.id
        }
      })
    },
    handleEdit(index,item){
      this.id = item.id
      this.dialogFormVisibleUser = true
    },
    delateUser(index,el){
      console.log(el)

      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: "confirm"
      }).then(() => {
        let ids = []
        ids.push(el.id)
        let params = {ids}
        deleteUserByIds(params).then(res=>{
          console.log(res)
          if(res.data.status == 0){
            this.pageNum=1,
            this.pageSize=10,
            this.init()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });

          }else{
            this.$message({
              type: 'error',
              message: res.data.message
            });
          }
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });

      
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageNum = 1
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNum = val
      this.init()
    },
   

    
    dialogClose(done){
      this.$refs.ruleForm.resetFields();
      done()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let id = this.id
          let newPassword = this.ruleForm.newPassword
          let confirmPassword = this.ruleForm.confirmPassword
          let params = {id,newPassword,confirmPassword}
          modifyUserPassword(params).then(res=>{
            if(res.data.status == 0){
              this.$message({
                message: '密码修改成功',
                type: 'success'
              });
              this.$refs[formName].resetFields();
              this.dialogFormVisibleUser = false
              this.init()
            }else{
              this.$message.error(res.data.message)
            }
          })

          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisibleUser = false
    }
  },

}
</script>

<style lang='less' scoped>
.userPages{
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  background-color: #1D1F2C;
  height: calc(100vh - 108px);
  overflow: auto;
  .newAdd{
    color: #63E9FF;
    border: 1px solid #00CEF0;
    background-color: rgba(49, 203, 236, 0.1400);
    border-radius: 2px;
  }
  .delate{
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 2px;
  }
  .checkTable{
    background-color: #282C41;
    color: #fff;
    padding: 5px 15px;
    margin-top: 20px;
    border-left: 4px solid #04D4FF;
    background-image: url('../../assets/images/mouId/liang.png');
    background-repeat: no-repeat;
    background-size: contain ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ct_title{
      font-size: 20px;
    }
    .ct_button{
      
    }
    
  }
  .tableBox{
    padding: 0 10px;
    background-color: #282C41;
    /deep/.el-table .el-table__cell {
      padding: 8px 0;
    }
    /deep/.el-table th.el-table__cell {
        background: #4F5367!important;
        color: #fff!important;
    }
    /deep/.el-table tr {
        background-color: #3C4052;
        color: #fff;
    }
    /deep/.el-table th.el-table__cell>.cell {
      border-right: 1px solid #fff;
      padding-left: 14px!important;
    }
    /deep/.el-table th.el-table__cell:last-child >.cell {
      border-right: 0;
    }
    /deep/.el-table_body tr.hover_row>td.el-table_cell{
      background-color: red!important;
    }
    /deep/.el-button--text {
      color: #3FC1FF;
    }
    /deep/.el-table__body-wrapper {
      background-color: #3C4052;
    }
    
  }
   tbody tr:hover>td,/deep/ tbody tr.hover-row>td { background-color: rgba(63,193,255,0.2000) }
  .block{
    padding: 20px 0;
    background-color: #282C41;
    /deep/.el-pagination{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 15px;
    }
    /deep/.el-pagination__total {
      color: #fff;
    }
    /deep/.el-input__inner {
      color: #fff;
      background-color: transparent;
    }
    /deep/.el-pagination.is-background .el-pager li {
      margin: 0 5px;
      background-color: transparent;
      color: #fff;
      min-width: 30px;
      border-radius: 2px;
      border: 1px solid #fff;
    }
    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: rgba(5, 190, 223, 0.14);
      color: #00BEDF;
      border: 1px solid #00BEDF;
    }
    /deep/.btn-prev {
       background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.btn-next{
      background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.el-pagination__jump {
      margin-left: 24px;
      font-weight: 400;
      color: #fff;
    }
  }
  .dialogUser{
    /deep/.el-dialog {
        margin-top: 25vh!important;
    }
    /deep/.el-dialog__header{
      background-color: #282C41;
    }
    /deep/.el-dialog__title {
      color: #fff;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
    /deep/.el-dialog__body {
      color: #fff;
      background-color: #282C41;
      background-image: url('../../assets/images/linebright.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
    /deep/.el-form-item__label {
      color: #fff;
    }
    /deep/.el-input__inner {
      background-color: #4F5367;
      border: 1px solid #7A7F8E;
      color: #fff;
    }
    .span_tip{
      font-size: 12px;
    }
    /deep/.el-dialog__footer {
      background-color: #282C41;
      background-image: url('../../assets/images/linebright.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
</style>

<style lang="less">
.confirm {
    width: 420px;
    background-color: #282C41;
    color: #fff;
    border-radius: 2px;
    border: none;
    .el-message-box__content {
      padding: 10px 15px;
      color: #fff;
      font-size: 14px;
    }
    .el-button {
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 2px;
    }
    .el-button--primary {
        color: #63E9FF;
        border: 1px solid #00CEF0;
        background-color: rgba(49, 203, 236, 0.1400);
        border-radius: 2px;
    }
}

</style>
